<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
                   body{
                background: url("bg.jpg") no-repeat;
                background-size: 100%;
            }
            #box{
                position: absolute;
                left: 50%;
                top: 50%;
                margin: -300px;
                width: 600px;
                height: 300px;
                line-height: 300px;
                text-align: center;
                font-size: 130px;
                text-shadow: oldlace;
                color: khaki;
                background: violet;
                border-radius: 10px;
                box-shadow:peru;
            }
            h1{
                text-align: center;
                color: skyblue;
            }
            #btn{
                position: absolute;
                left: 50%;
                top: 50%;
                width: 150px;
                height: 90px;
                font-size: 30px ;
                margin: 100px;
                background: aqua;
                border: aqua;
                color: white;
                outline: none;
            }
    </style>
</head>
<body>
    <h1>我是猪</h1>
    <div id="box">
    </div>
    <button id="btn">是猪的抽奖<button>
    <script>
        let arr = ["猪","小猪","蠢猪","你是蠢猪","小猪崽子"];
        function extruct(){
            if(arr.length == 0) {
                document.getElementById('box').innerText="猪抽奖结束";
                return;
            }
            let index = parseInt(Math.random() * arr.length);
            let lucker = arr[index];
            arr.splice(index,1);
            document.getElementById('box').innerText = lucker;
        }
        let start = false;
        document.getElementById('btn').addEventListener('click',function (){
            if (start){
                clearInterval(flag);
                extruct();
            } else {
                flag = setInterval(function (){
                    document.getElementById('box').innerText = arr[parseInt(Math.random() * arr.length)];
                },10)
            }
            start = !start;
        })
    </script>
</body>
</html>